<template>
	<div class="works-chapter-list-wr">
		<ol class="works-chapter-list">
			<li v-for="row in rows">
				<p>
					<span class="works-chapter-item" v-for="column in getColums(row -1)">
						<button v-bind:class="['crow' ,getChapterClassForLockOrUnlock(row-1,column-1)]" :title="'开始阅读'+info.name+'-'+getChapterData(row-1,column-1).name" @click="clickToChapter(getChapterData(row-1,column-1))" >
							<span>{{getChapterData(row-1,column-1).name}}</span>
							<span class="hint" v-if="getChapterData(row-1,column-1).coinPrice > 0">{{getChapterData(row-1,column-1).coinPrice}}金币</span>
						</button>
						
					</span>
				</p>
			</li>
		</ol>
		<div class="cpl_more" v-if="isLoadingMore">加载中...</div>
		<div class="cpl_nomore" v-if="paginationVo.lastPage">没有更多了 o(╥﹏╥)o</div>
	</div>
</template>

<script>
	import HTTPUtil from '../../js/HttpUtil.js'
	import AesUtil from '../../js/AesUtil.js'
	import UserInfoManager from '../../js/UserInfoManager.js'
	
	export default {
		// props: ["info"],
		data() {
			return{
				loadStatusText: '',
				info: {
					name: "",
					desciption: "",
					thumUrl: "",
					id: 0,
					isReverseOrder: false
				},
				rows: 0,
				cataloguelist: [],
				isMobile: false,
				isLoadingMore: false,
				paginationVo:{"pageSize":50,"pageNo":1,"firstResult":0,"nextPage":1,"prePage":1,"totalCount":49,"totalPage":1,"firstPage":true,"lastPage":false}
			}
		},
		mounted() {
			if (this._isMobile()) {
				this.isMobile = true;
				//console.log('是手机')
			} else {
				//console.log('是PC')
				this.isMobile = false;
			}
			
			console.log("mounted作品id：" + JSON.stringify(this.info))
			this.reloadData(false)

			this.addListingScrollToBottom()
		},
		methods: {
			clickToChapter: function(item) {
				//:to="{ path: '/LookComic', query: {charptId:getChapterData(row-1,column-1).id, productId: info.id }}"
				
				let that = this
				this.$router.push({
					path: '/LookComic',
					query: {charptId:item.id, productId: that.info.id }
				}).catch(err => {err})
			},
			adPlayerComplete: function(productId, chapterId) {//广告播放完成
				this.$router.push({
					path: '/LookComic',
					query: {charptId:item.id, productId: that.info.id }
				}).catch(err => {err})
			},
			updateInfo: function(info) {
				console.log("updateInfo更新作品id：" + JSON.stringify(info))
				this.info = info
				this.reloadData(false)
				// console.log("updateInfo结束...");
			},
			reloadData: function(LoadMore) {
				let productId = this.info.id
				if (productId == 0 || productId == undefined) {
					console.log("未拿到作品id：")
					return
				}
				if (this.isLoadingMore) {
					//正在加载中...
					return
				}
				if (LoadMore == true && this.paginationVo.lastPage){
					//已经是最后一页--仍然继续上拉
					return;
				}
				this.isLoadingMore = true
				var nowPage = this.paginationVo.pageNo
				if (LoadMore) {
					nowPage = nowPage + 1
				}else{
					nowPage = 1;
				}
 				
				console.log("获取作品id：" + productId + "nowPage="+nowPage)
				let sessionKey = UserInfoManager.getInfo().userExt.sessionKey
				var params = new URLSearchParams();
				params.append('productId', productId);
				params.append('pageNumber', nowPage);
				params.append('pageSize', this.paginationVo.pageSize);
				params.append('sessionkey', sessionKey);
				if(this.info.isReverseOrder == true){
					//倒序
					params.append('sortOrderModel', 2);
				}else{
					params.append('sortOrderModel', 0);
				}
				console.log("章节列表 参数:" + params);
				let that = this
				HTTPUtil.post('Chapter/list_v1_1_2.do', params)
					.then(response => {
						console.log("章节列表:"+JSON.stringify(response.data));
						that.isLoadingMore = false
						if (response.data.code == 0) {
							//解密数据
							//console.log("待解密字符串:"+response.data.enydata);
							let enyData = AesUtil.decryptAES(response.data.enydata);
							//console.log("章节列表:"+enyData);
							var list = JSON.parse(enyData);
							//list[10].isPurchased = true
							console.log("章节列表:"+JSON.stringify(list));
							let data = response.data;
							
							if (nowPage > 1) {
								that.cataloguelist = that.cataloguelist.concat(list);
								let rows = Math.ceil(that.cataloguelist.length / 4.0);
								that.rows = rows;
							}else {
								let rows = Math.ceil(list.length / 4.0);
								that.rows = rows;
								that.cataloguelist = list;
							}
							
							console.log('行数:' + that.rows + '长度：' + list.length + '\n');
							that.paginationVo = data.paginationVo
						}
					})
					.catch(function(error) {
						that.isLoadingMore = false
						console.log(error);
					});

				
			},
			addListingScrollToBottom: function() {
				let that = this;
				let wrap = document.getElementById("wdWorkDetail")
				wrap.onscroll = function() {
					//console.log("1scrollTop:"+wrap.scrollTop);
					//console.log("1wrap.scrollHeight:"+wrap.scrollHeight);
					//变量scrollTop是滚动条滚动时，距离顶部的距离
					var scrollTop = wrap.scrollTop;
					//变量windowHeight是可视区的高度
					var windowHeight = wrap.clientHeight;
					//变量scrollHeight是滚动条的总高度
					var scrollHeight = wrap.scrollHeight;
					if (scrollTop + windowHeight == scrollHeight) {
						//到了这个就可以进行业务逻辑加载后台数据了
						//console.log("到了底部");
						that.reloadData(true)
					}
				}
			},
			getColums: function(curRow) { //获取某一行有几列

				let needAll = curRow * 4 + 4;
				let interval = needAll - this.cataloguelist.length;
				var colums = interval > 0 ? (4 - interval) : 4;
				if (colums < 0) colums = 0;
				return colums;
			},
			getChapterIndex: function(curRow, curColumn) { //获取是数组的第几个

				let result = curRow * 4 + curColumn;

				return result;
			},
			getChapterData: function(curRow, curColumn) { //获取某个章节信息
				let index = this.$options.methods.getChapterIndex(curRow, curColumn);
				let data = {
					id: 0,
					name: ''
				};
				if (index < this.cataloguelist.length) {
					data = this.cataloguelist[index];
				}

				return data;
			},
			getChapterClassForLockOrUnlock: function(curRow, curColumn) {
				let item = this.getChapterData(curRow,curColumn)
				if (item.coinPrice > 0) {//当前章节收费
					if(item.isPurchased) {// 已购买
						return "unlock"
					}else {
						return "lock"
					}
				}
				return ""
			},
			_isMobile() {
				console.log('测试。。。。')
				console.log(navigator.userAgent)
				let flag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				return flag;
			}
		}

	}
</script>

<style>
	@import "../../css/ChapterList.css";
</style>
